<template>
  <div class="main">
    <MeteData :field="field"></MeteData>
    <div class="info-group">
      <div class="group-title">
        数据库类型 model
      </div>
      <div class="group-data">
        {{ model }}
      </div>
    </div>

    <div class="info-group">
      <div class="group-title">
        数据库版本 version
      </div>
      <div class="group-data">
        {{ field.version }}
      </div>
    </div>

    <div class="info-group">
      <div class="group-title">
        操作类型 operateType
      </div>
      <div class="group-data">
        {{ operateType }}
      </div>
    </div>

    <div class="info-group">
      <div class="group-title">
        执行的SQL sql
      </div>
      <div class="group-data">
        {{ field.sql }}
      </div>
    </div>

    <div class="info-group">
      <div class="group-title">
        账号 account
      </div>
      <div class="group-data">
        {{ field.account }}
      </div>
    </div>

    <div class="info-group">
      <div class="group-title">
        密码 password
      </div>
      <div class="group-data">
        {{ field.passWord }}
      </div>
    </div>

    <div class="info-group">
      <div class="group-title">
        执行结果 result
      </div>
      <div class="group-data">
        {{ result }}
      </div>
    </div>
  </div>
</template>

<script>
import MeteData from './metaData.vue';

export default {
  name: 'yunche_sql',
  props: ['field'],
  components: { MeteData },
  data() {
    return {};
  },

  computed: {
    model() {
      let sql_model = 'NULL';

      switch (this.field.model) {
        case 0:
          sql_model = 'MySql';
          break;

        case 1:
          sql_model = 'MSSQL';
          break;

        case 2:
          sql_model = 'Oracle';
          break;

        case 3:
          sql_model = 'Mongo';
          break;

        case 4:
          sql_model = 'ElasticSearch';
          break;

        case 5:
          sql_model = 'ClickHouse';
          break;
      }

      return sql_model;
    },

    operateType() {
      let sql_operator = 'NULL';

      if (this.field.operateType === 0) {
        sql_operator = '登录';
      } else if (this.field.operateType === 1) {
        sql_operator = '操作';
      }

      return sql_operator;
    },

    result() {
      let sql_result = 'NULL';

      if (this.field.result === 0) {
        sql_result = '成功';
      } else if (this.field.result === 1) {
        sql_result = '失败';
      }

      return sql_result;
    },
  },
};
</script>

<style scoped>
@import '../basicInfo.css';
</style>
